<template>
  <div>
    <!-- 进度条 -->
    <div class="step_main">
      <el-steps class="step-bar" :active="step" finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </div>
    <!-- 表单 -->
    <!-- 第一页表单 -->
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      :inline="false"
      class="form"
    >
      <div v-show="step === 1">
        <el-card shadow="never" class="card">
          <div class="clearfix">
            <span>基本信息</span>
          </div>
          <el-row :gutter="30">
            <!-- 商品名称 -->
            <el-col :span="8">
              <el-form-item prop="name" label="商品名称" size="small">
                <el-input v-model="form.name" class="ipt"></el-input>
              </el-form-item>
            </el-col>
            <!-- 商品编码 -->
            <el-col :span="8">
              <el-form-item prop="productSn" label="商品编码" size="small">
                <el-input v-model="form.productSn" class="ipt" />
              </el-form-item>
            </el-col>
            <!-- 商品分类 -->
            <el-col :span="8">
              <el-form-item label="商品分类" size="small">
                <el-select
                  v-model="form.productCategoryId"
                  class="ipt"
                  placeholder="商品分类"
                  clearable
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 商品品牌 -->
            <el-col :span="6" :offset="0">
              <el-form-item label="商品品牌" size="mini">
                <el-select
                  v-model="form.brandId"
                  class="search-input"
                  size="mini"
                  clearable
                  placeholder="品牌"
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 商品描述 -->
          <el-row :gutter="30">
            <el-col :span="16" :offset="0">
              <el-form-item label="商品描述" size="small">
                <el-input
                  v-model="form.description"
                  type="textarea"
                  class="ipt"
                  placeholder="商品描述"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第一页下面部分 -->
          <div class="clearfix">
            <span>商品属性</span>
          </div>
          <el-row :gutter="30">
            <!-- 商品原价 -->
            <el-col :span="8">
              <el-form-item label="商品原价" size="small">
                <el-input-number
                  v-model="form.originalPrice"
                  class="ipt"
                  placeholder="商品原价"
                  @change="originalPriceChange"
                />
              </el-form-item>
            </el-col>
            <!-- 促销类型 -->
            <el-col :span="8">
              <el-form-item label="促销类型" size="small">
                <el-select
                  v-model="form.promotionType"
                  class="ipt"
                  disabled
                  placeholder="没有促销使用原价"
                >
                  <el-option
                    v-for="item in promotionTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 活动价格 -->
            <el-col :span="8">
              <el-form-item label="活动价格" size="small">
                <el-input-number
                  v-model="form.price"
                  class="ipt"
                  :disabled="true"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 重量 -->
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="重量(kg)" size="small">
                <el-input-number
                  v-model="form.weight"
                  class="ipt"
                  @change="weightChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <!-- 审核状态 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="审核状态" size="small">
                <el-switch
                  v-model="form.verifyStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <!-- 是否上架 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="是否上架" size="small">
                <el-switch
                  v-model="form.publishStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 缩略图 -->
          <el-row :gutter="30">
            <el-form-item label="缩略图" size="small">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                :action="uploadUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="uploadSuccess"
              >
                <img v-if="form.pic" :src="form.pic" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-row>
          <!-- 第一页 其他信息 -->
          <div class="clearfix">
            <span>其他信息</span>
          </div>
          <el-row :gutter="30">
            <el-col :span="8" :offset="0">
              <el-form-item label="推荐状态" size="small">
                <el-switch
                  v-model="form.recommendStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="新品状态" size="small">
                <el-switch
                  v-model="form.newStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="预告商品" size="small">
                <el-switch
                  v-model="form.previewStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- 你是我的关键词 -->
            <el-col :span="8">
              <el-form-item label="搜索关键词" size="small">
                <el-input
                  v-model="form.keywords"
                  placeholder="关键词"
                  class="ipt"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 库存预警 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="库存预警" size="small">
                <el-input-number
                  v-model="form.lowStock"
                  class="ipt"
                  @change="lowStockChange"
                />
              </el-form-item>
            </el-col>
            <!-- 商品排序 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="商品排序" size="small">
                <el-input-number
                  v-model="form.sort"
                  class="ipt"
                  @change="sortChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16" :offset="0">
              <el-form-item label="产品服务" size="small">
                <el-checkbox-group v-model="serviceIds">
                  <el-checkbox label="1">无忧退货</el-checkbox>
                  <el-checkbox label="2">快速退款</el-checkbox>
                  <el-checkbox label="3">免费包邮</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <!-- 第二页 -->
      <div v-show="step === 2">
        <el-card shadow="never" class="card">
          <div class="clearfix">
            <span>商品sku信息</span>
          </div>
          <el-row :gutter="30">
            <el-col :span="8" :offset="0">
              <el-form-item label="标题" size="small">
                <el-input v-model="form.detailTitle" placeholder="标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="副标题" size="small">
                <el-input v-model="form.detailDesc" placeholder="副标题" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 画册图片 -->
          <el-form-item class="albumPics" label="画册图片" size="small">
            <el-upload
              ref="upload"
              :action="uploadUrlSave"
              :headers="headers"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="imgUploadSuccess"
              :on-preview="handlePictureCardPreview"
              :limit="5"
              list-type="picture-card"
            >
              <i class="el-icon-plus" />
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>

              <div slot="tip" class="el-upload__tip">
                <!-- <img
                  v-if="form.pic"
                  :src="form.pic"
                  style="width: 100px; height: 100px"
                /> -->
                只能上传jpg/png文件，且不超过500kb,文件不超过5个
              </div>
            </el-upload>
          </el-form-item>
          <!-- sku设置 -->
          <el-form-item style="margin-top: 10px" label="sku设置">
            <!-- 隐藏的checkbox -->
            <div v-show="skucolor.arr.length > 0" style="display: flex">
              颜色：
              <el-checkbox-group v-model="skucolor.selectArr">
                <el-checkbox
                  v-for="(item, index) in skucolor.arr"
                  :key="index"
                  :label="item"
                >
                  <span>{{ item }}</span>
                  <el-button
                    size="mini"
                    type="text"
                    style="color: red; margin-left: 10px"
                    @click="delParam(item, 'skucolor')"
                    >删除</el-button
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 多选框大小规格 -->
            <div v-show="skusize.arr.length > 0" style="display: flex">
              大小：
              <el-checkbox-group v-model="skusize.selectArr">
                <el-checkbox
                  v-for="(item, index) in skusize.arr"
                  :key="index"
                  :label="item"
                >
                  <span>{{ item }}</span>
                  <el-button
                    size="mini"
                    type="text"
                    style="color: red; margin-left: 10px"
                    @click="delParam(item, 'skusize')"
                    >删除</el-button
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 输入点击生成sku -->
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-input
                  v-model="skucolor.text"
                  style="width: 180px"
                  size="small"
                  placeholder="颜色描述：比如土豪金"
                />
                <el-button
                  class="sku_flex_item"
                  size="small"
                  @click="addSkuObj('skucolor')"
                  style="margin-left: 10px"
                  >创建颜色选项</el-button
                >
              </el-col>
              <el-col :span="6" :offset="0">
                <el-input
                  v-model="skusize.text"
                  style="width: 180px"
                  size="small"
                  placeholder="大小"
                />
                <el-button
                  class="sku_flex_item"
                  size="small"
                  @click="addSkuObj('skusize')"
                  style="margin-left: 10px"
                  >创建大小选项</el-button
                >
              </el-col>

              <el-col :span="3" :offset="0">
                <!-- 生成sku按钮 -->
                <el-button type="primary" size="default" @click="createSku()"
                  >生成sku列表</el-button
                >
              </el-col>
              <el-col :span="3" :offset="0">
                <el-button
                  type="primary"
                  size="default"
                  @click="createSku('add')"
                  >新增sku</el-button
                >
              </el-col>

              <!-- table表格 -->
              <el-table v-if="skuList.length > 0" :data="skuList" border stripe>
                <el-table-column type="index" label="序号" width="50" />
                <!-- sku图片 -->
                <el-table-column label="图片" :width="120">
                  <template slot-scope="scope">
                    <!-- 上传图片 -->
                    <el-upload
                      style="width: 100px; height: 100px"
                      :action="uploadUrl"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="
                        (res) => {
                          handleAvatarSuccess(res, scope.row)
                        }
                      "
                    >
                      <img
                        v-if="scope.row.pic"
                        :src="scope.row.pic"
                        style="width: 100px; height: 100px"
                      />
                      <i
                        v-else
                        style="width: 100px; height: 100px; margin-top: -31px"
                        class="el-icon-plus avatar-uploader-icon"
                      />
                    </el-upload>
                  </template>
                </el-table-column>

                <el-table-column label="颜色" :width="160" prop="color">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.spData[0].value" size="mini"  />
                  </template>
                </el-table-column>
                <el-table-column label="大小" :width="160">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.spData[1].value" v-if="scope.row.spData[1].value" size="mini" />
                  </template>
                </el-table-column>

                <!-- 库存 -->
                <el-table-column label="库存" width="200">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.stock"
                      placeholder="自定义库存"
                      size="mini"
                      clearable
                    />
                  </template>
                </el-table-column>
                <!-- 预警库存 -->
                <el-table-column label="预警库存" width="200">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.lowStock"
                      placeholder="预警库存"
                      size="mini"
                      clearable
                    />
                  </template>
                </el-table-column>
                <!-- sku编码 -->
                <el-table-column label="sku编码" width="200">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.skuCode"
                      placeholder="请输入sku编码"
                      size="mini"
                      clearable
                    />
                  </template>
                </el-table-column>
                <!-- 价格 -->
                <el-table-column label="价格" width="200">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.price"
                      placeholder="请输入sku编码"
                      size="mini"
                      clearable
                    />
                  </template>
                </el-table-column>
                <!-- 销量 -->
                <el-table-column label="销量" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.sale" size="mini" clearable />
                  </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" fixed="right" width="200">
                  <template slot-scope="scope">
                    <!-- 根据tempId删除数组 -->
                    <el-button
                      type="text"
                      style="colro: red"
                      size="mini"
                      @click="del(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-form-item>
        </el-card>
      </div>
      <!-- 第三页 -->
      <div v-show="step === 3">
        <el-card shadow="never" class="card">
          <div class="clearfix">
            <span>详情描述</span>
          </div>
          <el-form-item size="small" label="商品详情">
            <TiEditor ref="Ti" />
          </el-form-item>
          <el-form-item label="备注" size="small">
            <el-input
              v-model="form.note"
              type="textarea"
              class="ipt"
              placeholder="备注"
            />
          </el-form-item>
        </el-card>
      </div>
    </el-form>

    <div class="bottom_main">
      <el-button
        v-show="step > 1"
        class="submit_button"
        size="small"
        @click="lastBtn"
        >返回上一步
      </el-button>
      <el-button
        v-show="step < 3"
        size="small"
        class="submit_button"
        type="primary"
        @click="nextBtn"
        >{{ nextBtnText }}
      </el-button>
      <el-button
        v-show="step == 3"
        size="small"
        class="submit_button"
        type="primary"
        :loading="loading"
        @click="onSubmit"
        >提交保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Category from '@/api/category/index'
import brandApi from '@/api/brand/index'
import mixin from '@/mixins/index'
import { v4 as uuid } from 'uuid'
import TiEditor from '@/components/Tinymce'
import productApi from '@/api/product/detail/index'
import skuTable from './sku/index'
export default {
  mixins: [mixin],
  components: { TiEditor },

  data() {
    return {
      isshow:true,
      step: 1,
      id: '', //用于接收从params里的id
      loading: false,
      brandList: [],
      promotionTypeList: [],
      productList: [], // 商品分类列表
      form: {
        name: '',
        brandId: '',
        productCategoryId: '', //商品分类所选择的值
        price: 0, //价格
        originalPrice: '', //原价
        weight: 0, //重量
        description: '', //描述
        verifyStatus: 1, //审核状态
        publishStatus: 1, //是否上架
        pic: '', //缩略图
        recommendStatus: 1, //推荐状态
        newStatus: 1, //新品状态
        previewStatus: 1, //预告商品
        keywords: '', //关键词
        lowStock: 0, //库存预警
        sort: '', //排序
        detailTitle: '', // 标题
        detailDesc: '', // 副标题
        note: '' //备注
      },
      serviceIds: [], //产品服务
      fileList: [], //画册
      dialogVisible: false, //画册图片是否显示
      dialogImageUrl: '', // 点开大图 图片地址
      skuTable: [],
      skusize: {
        text: '',
        arr: [],
        selectArr: []
      }, //sku大小
      skucolor: {
        text: '', //checked 内容
        arr: [], //暂存的推这个里面
        selectArr: [] //用于暂存
      }, //sku颜色
      skuList: [], //sku
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      } //表单验证是否有名称
    }
  },
  methods: {
    //改变商品原价
    originalPriceChange(v) {
      this.form.price = v
    },
    //改变重量
    weightChange(g) {
      this.form.weight = g
    },
    //预警
    lowStockChange(j) {
      this.form.lowStock = j
    },
    //排序
    sortChange(p) {
      this.form.sort = p
    },
    //获取商品分类小列表
    getCatgoryList() {
      Category.getAllCategory().then((res) => {
        res.data.items.forEach((item) => {
          if (item.category.name === '乐居') {
            this.productList = item.children
          }
        })
      })
    },
    //获取品牌列表
    getBrandList() {
      brandApi
        .brandList()
        .then((res) => {
          this.brandList = res.data.items
        })
        .catch((rej) => {
          console.log('error', rej)
        })
    },
    //图片上传
    uploadSuccess(res) {
      if (res.success) {
        this.form.pic = res.data.fileUrl
      } else {
        this.$message.error('图片上传失败')
      }
      this.$refs.upload.clearFiles()
    },
    //sku图片上传
    handleAvatarSuccess(res, row) {
      if (res.success) {
        row.pic = res.data.fileUrl
      } else {
        this.$message('发生未知错误,上传图片失败')
      }
    },
    // 画册图片
    imgUploadSuccess(res) {
      console.log(res)
      if (res.success) {
        this.fileList.push({ url: res.data.fileUrl })
        this.form.pic = res.data.fileUrl
      } else {
        this.$message.error('图片上传失败')
      }
      // this.$refs.upload.clearFiles()
    },
    // 移除画册图片
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter((item) => {
        return item.url != file.url
      })
    },
    //画册中有图片的钩子
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 添加skus参数方法 第一个传obj 第二个传list
    addSkuObj(attr) {
      // console.log(this[attr].text)
      this[attr].arr.push(this[attr].text)
      //把input清空
      this[attr].text = ''
      // console.log(this[attr].arr)
    },
    //删除一条sku的情况 如颜色
    delParam(val, list) {
      this[list].arr = this[list].arr.filter((item) => item != val)
    },

    // 生成sku列表或新增一条sku !!!
    async createSku(adds) {
      if (this.skucolor.selectArr.length <= 0) {
        this.$message.error('请选中颜色')
        return
      }
      var arr = [this.skucolor.selectArr, this.skusize.selectArr]
      var obj = {
        pic: '', //图
        sale: '', // 销量
        price: this.form.price, // 价格
        skuCode: '100000', //sku编码
        stock: '', //库存
        lowStock: '' //预警库存
      }

      if (adds != 'add') {
        await this.$confirm(
          '此操作将清空sku列表,并生成新的列表,是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            // if (res=='confirm') {
            //点击确定走这里
            this.skuList = []
            this.$message({
              type: 'success',
              message: '创建成功!'
            })
            if (
              this.skucolor.selectArr.length > 0 &&
              this.skusize.selectArr.length == 0
            ) {
              var newArr = []
              this.skucolor.selectArr.forEach((item) => {
                if (typeof item === 'object') {
                  newArr.push([...item])
                } else {
                  newArr.push([item])
                }
              })
            } else {
              var newArr = arr.reduce((total, current) => {
                var skuArr = []
                total.forEach((out) => {
                  current.forEach((inner) => {
                    if (typeof out === 'object') {
                      skuArr.push([...out, inner])
                    } else {
                      skuArr.push([out, inner])
                    }
                  })
                })
                return skuArr
              })
            }
            newArr.forEach((item) => {
              const arr = [
                { key: '颜色', value: item[0] },
                { key: '大小', value: item[1] }
              ]
              this.skuList.push({
                spData: arr,
                tempId: uuid(), // 生成唯一标识符
                ...obj
              })
            })
          })
          .catch(() => {
            this.$message.error('已取消')
          })
      } else {
        if (
          this.skucolor.selectArr.length > 0 &&
          this.skusize.selectArr.length == 0
        ) {
          var newArr = []
          this.skucolor.selectArr.forEach((item) => {
            if (typeof item === 'object') {
              newArr.push([...item])
            } else {
              newArr.push([item])
            }
          })
        } else {
          var newArr = arr.reduce((total, current) => {
            var skuArr = []
            total.forEach((out) => {
              current.forEach((inner) => {
                // 判断out是否是数组类型
                if (typeof out === 'object') {
                  // 解构out数组
                  skuArr.push([...out, inner])
                } else {
                  skuArr.push([out, inner])
                }
              })
            })
            return skuArr
          })
        }
        // 处理newArr变成table表单
        console.log('newArr==', newArr)
        newArr.forEach((item) => {
          const arr = [
            { key: '颜色', value: item[0] },
            { key: '大小', value: item[1] }
          ]
          this.skuList.push({
            spData: arr,
            tempId: uuid(), // 生成唯一标识符
            ...obj
          })
        })
      }
    },

    // 根据uuid删除sku属性
    del(tempId) {
      if (this.$route.params.id) {
        this.skuList = this.skuList.filter((item) => {
          return item.id !== tempId.id
        })
      } else {
        this.skuList = this.skuList.filter((item) => {
          return item.tempId !== tempId.tempId
        })
      }
      console.log(tempId)
      console.log(this.skuList)
    },
    //回上一步
    lastBtn() {
      this.step--
    },
    //去下一步
    nextBtn() {
      this.step++
    },
    //提交
    onSubmit() {
      var brandName = ''
      var productCategoryName = ''
      //商品品牌 所选取的内容
      this.brandList.forEach((item) => {
        if (item.id === this.form.brandId) {
          brandName = item.name
        }
      })
      //商品分类 所选择的内容
      this.productList.forEach((item) => {
        if (item.id === this.form.productCategoryId) {
          productCategoryName = item.name
        }
      })
      this.$refs.form.validate((valid) => {
        if (valid) {
          var rich = this.$refs.Ti.getContent() //富文本内容
          const albumPicsArr = this.fileList.map((item) => item.url) //画册
          const subSkuList = []
          this.skuList.forEach((item) => {
            // 删除掉 tempId
            if (item.tempId) {
              delete item.tempId
            }
            subSkuList.push({
              ...item,
              spData: JSON.stringify(item.spData) // 商品销售属性，json格式String类型 ,
            })
          })
          console.log(this.fileList)
          if (!this.id) {
            //判断是新增还是编辑
            productApi
              .addProductAndSkus({
                pmsSkuStockList: subSkuList,
                product: {
                  ...this.form,
                  brandName,
                  productCategoryName,
                  detailMobileHtml: rich,
                  albumPics: albumPicsArr.join(','),
                  serviceIds: this.serviceIds.join(',')
                }
              })
              .then((res) => {
                if (res.success) {
                  this.$message.success('新增成功')
                  this.$router.push({ path: '/product/productList' })
                }
              })
              .catch((rej) => {
                console.log(rej)
                this.$message.error('添加失败')
              })
          } else {
            productApi
              .updateProductAndSkus({
                pmsSkuStockList: subSkuList,
                product: {
                  ...this.form,
                  brandName,
                  productCategoryName,
                  detailMobileHtml: rich,
                  albumPics: albumPicsArr.join(','),
                  serviceIds: this.serviceIds.join(',')
                }
              })
              .then((res) => {
                if (res.success) {
                  this.$message.success('修改成功')
                  this.$router.push({ path: '/product/productList' })
                }
              })
              .catch((rej) => {
                console.log(rej)
                this.$message.error('添加失败')
              })
          }
        } else {
          this.$message.error('请填写必要信息')
          return false
        }
      })
    },
    // 获取详情
    getDetail() {
      productApi
        .productSkusDetail(this.id)
        .then((res) => {
          console.log(res)
          this.form = res.data.product
          console.log(res.data.product)
          // this.fileList = res.data.product.albumPics.map((item) => item.url)
          res.data.skus.forEach((item) => {
            this.skuList.push({
              ...item,
              spData: JSON.parse(item.spData)
            })
          })
          // 处理画册
          if (this.form.albumPics) {
            const imgArr = this.form.albumPics.split(',')
            imgArr.forEach((item) => {
              this.fileList.push({
                url: item
              })
            })
          }
          //处理产品服务
          if (this.form.serviceIds && this.form.serviceIds.length > 0) {
            this.serviceIds = this.form.serviceIds.split(',')
          }
          //  this.$refs.Ti.setContent(this.form.detailMobileHtml)
          this.$refs.Ti.setContent(res.data.product.detailMobileHtml) //富文本
        })
        .catch((error) => {
          this.$message.error(error)
        })
    }
  },
  created() {
    // console.log(this.skuTable)
    this.id = this.$route.params.id
    this.getCatgoryList(), this.getBrandList()
    if (this.id) {
      this.getDetail()
    }
  },
  computed: {
    nextBtnText() {
      var t = ''
      switch (this.step) {
        case 1:
          t = '下一步,填写库存信息'
          break

        case 2:
          t = '下一步,填写移动端详情'
          break
        default:
          break
      }
      return t
    }
  }
}
</script>

<style scoped lang="scss">
.step_main {
  width: 100%;
  background-color: #fff;
  margin-bottom: 30px;
  overflow: hidden;

  .step-bar {
    width: 60%;
    margin: 30px auto;
  }
}
.card {
  margin: 30px;
  .form {
    ::v-deep .el-form-item {
      label {
        font-weight: normal;
      }
    }
  }
  .clearfix {
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
  }
  .ipt {
    width: 50%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

.bottom_main {
  width: fit-content;
  margin: 10px auto;
}
</style>